<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加二手房</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
    <link rel="stylesheet" href="/backstage/css/add_house.css?v=1">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/backstage/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/backstage/js/xadmin.js?v=1"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--&lt;!&ndash;[if lt IE 9]>-->
    <!--<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
    <!--<![endif]&ndash;&gt;-->
</head>

<body >

<div class="x-body" >

    <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>楼盘标题
            </label>
            <div class="layui-input-block">
                <input type="text" id="title" name="title" value="{$details['title']}" maxlength="50" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div id="main">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>缩略图
                </label>
                <div class="layui-input-inline">
                    <input type="button" id="thumb_img"  @click="showImgList('thumb_img',1)"  value="选择图片（单选）" class="self-btn" >
                    <img :src="imgPath+thumb_img" style="width:190px;margin:0 0 10px 20px;" alt="">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>轮播展示图
                </label>
                <div class="layui-input-block" >
                    <input type="button" id="viewpager"  @click="showImgList('returnImgList',2)" value="选择图片（多选）" lay-verify="required"
                           autocomplete="off" class="self-btn">

                    <img  v-for="(item,index) in returnImgList" :src="imgPath+item" style="max-width:150px;margin:10px 10px 10px 20px;" alt="">

                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span> 选择地区
                </label>
                <div class="layui-input-inline">
                    <select name="area_id" >
                        {foreach name="regions" item="row" index='index'}
                        <option value="{$row['id']}" {$details['area_id']==$row['id']?'selected':''}>{$row['parent']} - {$row['shortname']}</option>
                        {/foreach}
                    </select>
                </div>

            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    房本备件
                </label>
                <div class="layui-input-inline">
                    <input type="button" id="house_cert"  @click="showImgList('house_cert',1)"  value="选择图片（单选）" class="self-btn" >
                    <img :src="imgPath+house_cert" style="width:190px;margin:0 0 10px 20px;" alt="">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                选择标签
            </label>
            <div class="layui-input-block">
                {foreach name='labels' item='row' index='index'}
                <input name='labels[]' {:in_array($row['id'],$details['labels'])?'checked="checked"':''} lay-skin="primary" type="checkbox" title="{$row['tag_name']}" value="{$row['id']}">
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>总面积
            </label>
            <div class="layui-input-inline">
                <input type="number" id="min_area" name="total_area"  value="{$details['total_area']}" placeholder="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <p style="float: left;margin:10px 5px 0 0px;">m²</p>

        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>套内面积
            </label>
            <div class="layui-input-inline">
                <input type="number" id="usable_area" name="usable_area" value="{$details['usable_area']}" placeholder="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <p style="float: left;margin:10px 5px 0 0px;">m²</p>

        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>总售价
            </label>
            <div class="layui-input-inline">
                <input type="number" id="total_price" name="total_price" value="{$details['total_price']}"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">万</div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>均价
            </label>
            <div class="layui-input-inline">
                <input type="number" id="unit_price" name="unit_price" value="{$details['unit_price']}"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">元</div>

        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 选择朝向
            </label>
            <div class="layui-input-inline">
                <select name="direction">
                    {foreach name="aspect" item="row"}
                    <option value="{$row['aspect_id']}" {$details['direction']==$row['aspect_id']?'selected="selected"':''}>{$row['aspect_name']}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item">

            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>楼层类型
            </label>

            <div class="layui-input-block">
                <input type="radio" name="floor_type" value="1"  {$details['floor_type']==1?'checked="checked"':''} title="低层" >
                <input type="radio" name="floor_type" value="2"  {$details['floor_type']==2?'checked="checked"':''} title="中层" >
                <input type="radio" name="floor_type" value="3"  {$details['floor_type']==3?'checked="checked"':''} title="高层" >
            </div>

        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>总楼层
            </label>
            <div class="layui-input-inline">
                <input type="number" id="floors" name="floors" value="{$details['floors']}"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>





        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>房源地址
            </label>
            <div class="layui-input-block">
                <input type="text" id="address" name="address" value="{$details['address']}"  maxlength="200" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>房屋年限
            </label>
            <div class="layui-input-inline">
                <input type="number" id="durable_years" name="durable_years" value="{$details['durable_years']}"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>土地年限
            </label>
            <div class="layui-input-inline">
                <input type="number" id="soil_years" name="soil_years"  value="{$details['soil_years']}" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>房屋预算
            </label>
            <div class="layui-input-block">
                <input type="text" id="budget" name="budget" maxlength="50" value="{$details['budget']}" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                户型结构
            </label>
            <div class="layui-input-block">
                <input type="text" id="structure" name="structure" maxlength="32" value="{$details['structure']}"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>梯户比例
            </label>
            <p style="float: left;margin:10px 5px 0 20px;">
                一梯
            </p>
            <div class="layui-input-inline">

                <input type="number" id="floor_ratio" name="floor_ratio" value="{$details['floor_ratio']}"  required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <p style="float: left;margin:10px 15px 0 0;">
                户
            </p>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"> <span class="x-red">*</span>供暖方式</label>
            <div class="layui-input-block">

                {foreach  name="heating" item="row" index='index'}
                <input type="radio" name="heating" value="{$index}"  {$details['heating']==$index?'checked="checked"':''} title="{$row}" >
                {/foreach}
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 交易权属
            </label>
            <div class="layui-input-inline">
                <select name="transaction_type">
                    {foreach name="transaction_types" item="row" index='index'}
                    <option value="{$index}" {$details['transaction_type']==$index?'selected="selected"':''}>{$row}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 产权所属
            </label>
            <div class="layui-input-inline">
                <select name="property_right_type">
                    {foreach name="property_right_types" item="row" index='index'}
                    <option value="{$index}" {$details['property_right_type']==$index?'selected="selected"':''}>{$row}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red"></span>抵押信息
            </label>
            <div class="layui-input-block">
                <input type="text" id="pledge" name="pledge" value="{$details['pledge']}"  maxlength="32"
                       autocomplete="off" class="layui-input">
            </div>

        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>年代
            </label>
            <div class="layui-input-block">
                <input type="number" id="time" name="time"
                       autocomplete="off" class="layui-input" value="{$details['time']}" >
            </div>

        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>户型
            </label>
            <div class="layui-input-inline">
                <input type="number" id="room_num" name="room_num"
                       autocomplete="off" class="layui-input" value="{$details['room_num']}" >

            </div>
            <p style="float: left;margin:10px 15px 0 0;">房</p>
            <div class="layui-input-inline">

                <input type="number" id="lobby_num" name="lobby_num"
                       autocomplete="off" class="layui-input" value="{$details['lobby_num']}" >
            </div>
            <p style="float: left;margin:10px 15px 0 0;">厅</p>

        </div>


        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>小区名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="uptown" name="uptown" value="{$details['uptown']}" maxlength="30" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label"> <span class="x-red">*</span>车位情况</label>
            <div class="layui-input-block">

                {foreach  name="carport_types" item="row" index='index'}
                <input type="radio" name="carport_type" value="{$index}"  {$details['carport_type']==$index?'checked="checked"':''}  title="{$row}" >
                {/foreach}
            </div>
        </div>


        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 装修情况
            </label>
            <div class="layui-input-inline">
                <select name="fitment_case">
                    {foreach name="fitment_case" item="row" index='index'}
                    <option value="{$row['fitment_type']}" {$details['fitment_case']==$row['fitment_type']?'selected="selected"':''}>{$row['title']}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 房屋用途
            </label>
            <div class="layui-input-inline">
                <select name="use_type">
                    {foreach name="purpose" item="row"}
                    <option value="{$row['prupose_id']}" {$details['use_type']==$row['prupose_id']?'selected="selected"':''}>{$row['title']}</option>
                    {/foreach}
                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span> 经纪人
            </label>
            <div class="layui-input-inline">
                <select name="broker_id">

                    {foreach name="brokers" item="row"}
                    <option value="{$row['id']}" {$details['broker_id']==$row['id']?'selected="selected"':''}>{$row['broker_name']}</option>
                    {/foreach}
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>状态
            </label>
            <div class="layui-input-block">

                <input type="radio" name="off" value="1" {$details['off']==1?'checked="checked"':''} title="上架" >
                <input type="radio" name="off" value="2" {$details['off']==2?'checked="checked"':''} title="下架" >

            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label for="desc" class="layui-form-label">
                详情介绍
            </label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" id="description" name="description" maxlength="500" class="layui-textarea">{$details['description']} </textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="add" type="button">确认修改</button>
        </div>
        <!--{:token()}-->
        <input type="hidden" value="{$details['id']}" name="id">

    </form>
</div>
</body>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZDue9gF4HfumIt5DcwU0INw1ODmRcV16"></script>-->
<!--<script src="/backstage/js/baiduMap.js"></script>-->


<script>

    layDate();
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //监听提交
        form.on('submit(add)', function(data){

            console.log(data);

            var data = data.field;

            if(data.floors<1){
                msg('总楼层不能少于1');return;
            }

            if(data.total_area<1 ){
                msg('面积不能少于1'); return;
            }


            if(data.unit_price<0 ){
                msg('均价不能为负数'); return;
            }
            if(data.total_price<0 ){
                msg('均价不能为负数'); return;
            }

            if(data.durable_years<0 ){
                msg('房屋年限不能为负数'); return;
            }

            if(data.soil_years<0 ){
                msg('土地年限不能少于1'); return;
            }
            if(data.floor_ratio<0 ){
                msg('梯户比例不能少于1'); return;
            }

            if(data.room_num<0  || data.lobby_num<1 ){
                msg('户型不能少于1'); return;
            }


            if(app.thumb_img==''){
                msg('请选择缩略图'); return;
            }

            var viewPage = app.returnImgList;

            if(viewPage.length==0){
                msg('请选择轮播展示图'); return;
            }


            data.thumb_img = app.thumb_img;
            data.viewpager = viewPage;
            data.house_cert = app.house_cert;

            console.log(data);



            $.post('{:config("template.root_path")}/overseashouse/update/'+data.id,data,function(res){
                if(res.code=='200'){
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);

                    if(index){
                        //关闭当前frame
                        parent.layer.close(index);
                        parent.layer.msg("修改成功", {icon: 6,time:1500});
                        parent.app.getListData();
                        parent.app.page();
                    }else{
                        layer.msg("修改成功", {icon: 6,time:1500});
                        window.location.reload();
                    }

                }else{
                    layer.msg(res.msg, {icon: 5,time:1500});
                }

            },'json');

        });

    });


    function msg(text){
        layer.msg(text, {icon: 2,time:1500});

    }

    //获取选择的图片
    var app = new Vue({
        el:'#main',
        data: {
            imgPath:'{:config("api.oss_img_path")}',
            thumb_img:'{$details["thumb_img"]}',
            returnImg:'',
            house_cert:'{$details["house_cert"]}',
            returnImgList:[],
            flag:''
        },
        methods:{

            //处理从图片弹层传递过来的图片
            getImg:function(){

                console.log('flag',this.flag);
                switch (this.flag){
                    case 'thumb_img':
                        this.thumb_img=this.returnImg;
                        break;
                    case 'house_cert':
                        this.house_cert=this.returnImg;
                        break;
                    case 'houseTypes':
                        this.houseTypes[this.houseTypeIndex].img = this.returnImg;
                        break;
                }
            },


            //添加户型
            addHouseType:function(){
                console.log(this.houseTypes);
                var type={img:'',fang:'',ting:'',wei:'',total_area:''};
                this.houseTypes.push(type);
            },


            //取消户型
            delHouseType:function(index){
                this.houseTypes.splice(index,1);
            },

            //弹出图片选择列表
            showImgList(flag,sel,index=0){


                this.houseTypeIndex=index;
                this.flag=flag;
                console.log(flag,sel);

                var selTitle = sel==1?'（单选）':'（多选）';

                x_admin_show('选择图片'+selTitle,'{:config(\'template.root_path\')}/resource/image_folder'+'?sel='+sel);
            }



        },
        created: function () {
            this.returnImgList = <?php echo $details["viewpager"]?>;

        }
    });


</script>

</html>